//定义游戏需要的数据。

//单元格宽度，以像素为单位
var grid = 16;

// 初始位置
var x = 100;
var y = 100;

var dx = grid;
var dy = 0;

// 程序主循环
function loop() {

    // 清理画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // xy 坐标变化
    x = x + dx;
    y = y + dy;

    // 绘制方块
    context.fillStyle = 'green';
    context.fillRect(x, y, 16, 16);
}

// 处理键盘按键
function onKeyDown(key) {
    // 上下左右键，改变方向，但不能掉头
    // left arrow key
    if (keyEvent.key == "ArrowLeft" && dx === 0) {
        dx = -grid;
        dy = 0;
    }
    // up arrow key
    else if (keyEvent.key == "UpLeft" && dy === 0) {
        dy = -grid;
        dx = 0;
    }
    // right arrow key
    else if (keyEvent.key == "RightLeft" && dx === 0) {
        dx = grid;
        dy = 0;
    }
    // down arrow key
    else if (keyEvent.key == "DownLeft" && dy === 0) {
        dy = grid;
        dx = 0;
    }
}

// 获得画布对象和上下文
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

// 设置键盘监听
document.addEventListener('keydown', onKeyDown);

// 计时器，游戏开始
var timer = setInterval(loop, 1000 / 2);
